<template>
    <el-form label-width="100px">
        <el-form-item label="SPU名称">
            <el-input placeholder="请你输入SPU名称" v-model="SpuParams.spuName"></el-input>
        </el-form-item>
        <el-form-item label="SPU品牌">
            <el-select style="width: 200px;" v-model="SpuParams.tmId">
                <el-option :label="item.tmName" v-for="(item, index) in AllTradeMark" :key="item.id"
                    :value="item.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="SPU描述">
            <el-input type="textarea" placeholder="请你输入SPU描述" v-model="SpuParams.description"></el-input>
        </el-form-item>
        <el-form-item label="SPU图片">
            <el-upload v-model:file-list="imgList" action="/api/admin/product/fileUpload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :before-upload="handlerUpload">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;height: 100%;" />
            </el-dialog>
        </el-form-item>
        <el-form-item label="SPU销售属性">
            <!-- 展示销售属性下拉菜单 -->
            <el-select v-model="saleAttrIdAndValueName" style="width: 200px;"
                :placeholder="unSelectSaleAttr.length ? `还未选择${unSelectSaleAttr.length}个` : '暂无数据可选择'">
                <el-option :label="item.name" :value="`${item.id}:${item.name}`"
                    v-for="(item, index) in unSelectSaleAttr" :key="item.id"></el-option>
            </el-select>
            <el-button @click="addSaleAttr" :disabled="saleAttrIdAndValueName ? false : true" style="margin-left: 10px;"
                type="primary" icon="Plus">添加属性</el-button>
            <!-- table展示销售属性与属性值 -->
            <el-table border style="margin: 10px 0;" :data="saleAttr">
                <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                <el-table-column label="销售属性名字" width="120px" prop="saleAttrName"></el-table-column>
                <el-table-column label="销售属性值">
                    <template #="{ row, $index }">
                        <el-tag v-for="(tag, index) in row.spuSaleAttrValueList" :key="tag.id" class="mx-1" closable
                            :type="tag.type" style="margin:0 5px;" @close="row.spuSaleAttrValueList.splice(index, 1)">
                            {{ tag.saleAttrValueName }}
                        </el-tag>
                        <el-input v-if="row.flag == true" size="small" style="width: 100px;" placeholder="请你输入属性值"
                            v-model="row.saleAttrValue" @blur="toLook(row)"></el-input>
                        <el-button @click="toEdit(row)" v-else size="small" type="primary" icon="Plus"></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template #="{ row, $index }">
                        <el-button size="small" type="primary" icon="Delete"
                            @click="saleAttr.splice($index, 1)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-form-item>
        <el-form-item>
            <el-button :disabled="saleAttr.length > 0 ? false : true" @click="save" type="primary">保存</el-button>
            <el-button @click="cancel" type="primary">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { reqAddOrUpdateSPU, reqAllTradeMark, reqSpuImageList, reqSpuHasSaleAttr, reqAllSaleAttr } from '@/api/product/spu';
import type { SaleAttrValue, HasSaleAttr, SaleAttr, SpuImg, TradeMark, SpuData, AllTradeMark, SpuHasImg, SaleAttrResponseData, HasSaleAttrResponseData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';

let $emit = defineEmits(['changeScene'])
// 存储已有的SPU数据
let AllTradeMark = ref<TradeMark[]>([])
// 商品图片
let imgList = ref<SpuImg[]>([])
// 已有的SPU销售属性
let saleAttr = ref<SaleAttr[]>([])
// 全部的销售属性
let allSaleAttr = ref<HasSaleAttr[]>([])
// 控制对话框的显示隐藏
let dialogVisible = ref<boolean>(false)
// 存储预览图片地址
let dialogImageUrl = ref<string>('')
// 存储已有的spu对象
let SpuParams = ref<SpuData>({
    category3Id: '',//收集三级分类id
    spuName: "",//spu名字
    description: "",//spu描述
    tmId: 0,//品牌id
    spuImageList: [],
    spuSaleAttrList: [],
})
// 将来收集还未选择的销售属性id与属性名字
let saleAttrIdAndValueName = ref<string>('')

// 点击取消按钮:通知父组件切换场景为1,展示SPU数据
const cancel = () => {
    $emit('changeScene', { flag: 0, params: 'update' })
}

// 子组件书写一个方法
const initHasSpuData = async (spu: SpuData) => {
    // 存储已有的spu对象,将来在模板中展示
    SpuParams.value = spu
    // spu:即为父组件传递过来的已有的SPU对象(不完整)
    // 获取全部品牌数据
    let result: AllTradeMark = await reqAllTradeMark()

    // 获取某一个品牌全部售卖商品图片
    let result1: SpuHasImg = await reqSpuImageList(spu.id)

    // 获取已有的SPU销售属性数据
    let result2: SaleAttrResponseData = await reqSpuHasSaleAttr(spu.id)

    // 获取全部SPU销售属性数据
    let result3: HasSaleAttrResponseData = await reqAllSaleAttr()

    // 存储全部品牌的数据
    AllTradeMark.value = result.data

    // SPU对应的商品图片数据
    imgList.value = result1.data.map((item: any) => {
        return {
            name: item.imgName,
            url: item.imgUrl
        }
    })

    // 存储已有的SPU销售属性
    saleAttr.value = result2.data

    // 全部的销售属性
    allSaleAttr.value = result3.data
}

// 照片墙点击预览触发
const handlePictureCardPreview = (file: any) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

// 照片墙删除文件
const handleRemove = () => {
    console.log('照片墙删除文件');
}

// 照片墙上传成功之前 约束文件大小类型
const handlerUpload = (file: any) => {
    if (file.type == 'image/png' || file.type == 'image/jpeg' || file.type == 'image/gif') {
        if (file.size / 1024 / 1024 < 3) {
            return true
        } else {
            ElMessage({
                type: "error",
                message: '上传的文件大小务必小于3M'
            })
            return false
        }
    } else {
        ElMessage({
            type: "error",
            message: '上传的文件务必是PNG|JPG|GIF'
        })
        return false
    }
}

// 计算出当前SPU还未拥有的销售属性
let unSelectSaleAttr = computed(() => {
    /**
     *  全部的销售属性:颜色 版本 尺码
     *  已有的销售属性:颜色
     */
    let unSelectArr = allSaleAttr.value.filter(item => {
        return saleAttr.value.every(item1 => {
            return item.name != item1.saleAttrName
        })
    })
    return unSelectArr
})

// 添加销售属性
const addSaleAttr = () => {
    /**
     *  baseSaleAttrId: number;
     * saleAttrName: string;
     * spuSaleAttrValueList: SpuSaleAttrValueList;
     */
    const [baseSaleAttrId, saleAttrName] = saleAttrIdAndValueName.value.split(':')
    // 准备一个新的销售属性对象:将来带给服务器
    let newSaleAttr: SaleAttr = {
        baseSaleAttrId,
        saleAttrName,
        spuSaleAttrValueList: []
    }
    // 追加到数组中
    saleAttr.value.push(newSaleAttr)
    // 清空收集的数组
    saleAttrIdAndValueName.value = ''
}

// 属性值按钮点击
const toEdit = (row: SaleAttr) => {
    // 点击按钮时,input组件出来->编辑模式
    row.flag = true
    row.saleAttrValue = ''
}

// 表单元素失去焦点
const toLook = (row: SaleAttr) => {
    // 郑李收集到属性id与属性名字
    const { baseSaleAttrId, saleAttrValue } = row
    // 整理成服务器需要的属性值形式
    let newSaleAttrValue: SaleAttrValue = {
        baseSaleAttrId,
        saleAttrValueName: (saleAttrValue as string)
    }

    // 非法情况
    if (saleAttrValue?.trim() == '') {
        ElMessage({
            type: "error",
            message: '属性值不能为空'
        })
        return
    }
    // 判断属性值是否在数组中存在
    let repeat = row.spuSaleAttrValueList.find((item: any) => {
        return item.saleAttrValueName == saleAttrValue
    })
    if (repeat) {
        ElMessage({
            type: "error",
            message: '属性值重复'
        })
        return
    }

    // 追加新的属性值对象
    row.spuSaleAttrValueList.push(newSaleAttrValue)

    // 切换为查看模式
    row.flag = false
}

// 保存按钮
const save = async () => {
    // 整理参数 发请求 添加SPU|更新SPU

    // 1.照片墙数据
    SpuParams.value.spuImageList = imgList.value.map((item: any) => {
        return {
            imgName: item.name,//图片的名字
            imgUrl: (item.response && item.response.data) || item.url
        }
    })


    // 2.整理销售属性的数据
    SpuParams.value.spuSaleAttrList = saleAttr.value

    let result = await reqAddOrUpdateSPU(SpuParams.value)
    if (result.code == 200) {
        ElMessage({
            type: 'success',
            message: SpuParams.value.id ? '更新成功' : '修改成功'
        })
        $emit('changeScene', { flag: 0, params: SpuParams.value.id ? 'update' : 'add' })
    } else {
        ElMessage({
            type: 'error',
            message: SpuParams.value.id ? '更新失败' : '修改失败'
        })
    }
}

// 添加一个新的SPU初始化方法
const initAddSpu = async (c3Id: number | string) => {
    // 清空数据
    Object.assign(SpuParams.value, {
        id:'',
        category3Id: '',//收集三级分类id
        spuName: "",//spu名字
        description: "",//spu描述
        tmId: '',//品牌id
        spuImageList: [],
        spuSaleAttrList: [],
    })
    //  清空照片墙
    imgList.value = []
    // 清空销售属性
    saleAttr.value = []
    saleAttrIdAndValueName.value = ''

    // 存储c3Id
    SpuParams.value.category3Id = c3Id
    // 获取全部品牌数据
    let result: AllTradeMark = await reqAllTradeMark()
    let result1: HasSaleAttrResponseData = await reqAllSaleAttr()

    // 存储数据
    AllTradeMark.value = result.data
    allSaleAttr.value = result1.data

}

//对外暴露
defineExpose({ initHasSpuData, initAddSpu })
</script>

<style lang="scss" scoped></style>